<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
	<div id="app">
		<form action="">
			<input type="text" placeholder="用户名" @keyup.delete="clearContent" v-model="uname" /><br>
			<!-- @keyup.enter按回车键,松开,触发handleSubmit -->
			<input type="password" placeholder="密码" @keyup.enter="handleSubmit" v-model="pwd"><br>
			<input type="button" @click="handleSubmit" value="提交">
		</form>
		<input type="text" @keyup.65="btnHandle">
	</div>
	<script>
		// 可以使用 `v-on:keyup.f1`
		Vue.config.keyCodes.f1 = 112;

		let vm = new Vue({
			el: '#app',
			data: {
				uname: '',
				pwd: ''
			},
			methods: {
				handleSubmit() {
					//获得用户数据,通过ajax和服务端进行交互
					console.log(this.uname, this.pwd);
				},
				btnHandle(event) {
					console.log(event.keyCode);
				},
				clearContent() {
					this.uname = '';
				}
			}
		});
	</script>
</body>

</html>